<template>
  <div class="main-full-height">
    <div class="zoom">
      <div :class="'zoom-out'+ (nowVal==50?' disabled':'')" @click="zoomSize(1)" />
      <span>{{ nowVal }}%</span>
      <div :class="'zoom-in'+ (nowVal==300?' disabled':'')" @click="zoomSize(2)" />
    </div>
    <div class="fd-nav-content">
      <section class="dingflow-design">
        <div id="box-scale" class="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'">
          <nodeWrap
            :node-config.sync="nodeConfig"
            :is-tried.sync="isTried"
            :director-max-level="directorMaxLevel"
            :table-id="tableId"
            :form-data="formData"
            :scheme-type="schemeType"
          />
          <!-- <div class="end-node">
            <div class="end-node-circle" />
            <div class="end-node-text">流程结束</div>
          </div> -->
        </div>
      </section>
    </div>
    <el-dialog title="提示" :visible.sync="tipVisible" :append-to-body="true">
      <div class="ant-confirm-body">
        <i class="anticon anticon-close-circle" style="color: #f00;" />
        <span class="ant-confirm-title">当前无法发布</span>
        <div class="ant-confirm-content">
          <div>
            <p class="error-modal-desc">以下内容不完善，需进行修改</p>
            <div class="error-modal-list">
              <div v-for="(item,index) in tipList" :key="index" class="error-modal-item">
                <div class="error-modal-item-label">流程设计</div>
                <div class="error-modal-item-content">{{ item.msg }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tipVisible = false">我知道了</el-button>
        <el-button type="primary" @click="tipVisible = false">前往修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Array,
      default: () => []
    },
    flowData: {
      type: Object,
      default: Object
    },
    schemeType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isTried: false, // 是否验证
      tipList: [],
      tipVisible: false,
      nowVal: 100,
      nodeConfig: {},
      directorMaxLevel: 0,
      dialogVisible: true,
      tableId: '1'
    }
  },
  // beforeDestroy() {
  //   console.log('流程销毁')
  //   this.updateFlow()
  // },
  created() {
    if (this.isEdit) {
      this.nodeConfig = this.flowData
    } else {
      if (this.flowData && this.flowData.pkId) { // 已设置过流程
        this.nodeConfig = this.flowData
        return
      }
      this.$axios.get(`${process.env.BASE_URL}data.json`, {
        workFlowDefId: this.$route.params.workFlowDefId
      }).then(res => {
        if (this.schemeType === 1) {
          this.nodeConfig = res.applydata.nodeConfig
        } else if (this.schemeType === 3) {
          this.nodeConfig = res.borrowdata.nodeConfig
        } else {
          this.nodeConfig = res.data.nodeConfig
        }
      })
    }
  },
  methods: {
    toReturn() {
      // window.location.href = ""
    },
    reErr(data) {
      if (data.childNode) {
        if (data.childNode.type === 1) { // 审批人
          if (data.childNode.error) {
            this.tipList.push({ msg: data.childNode.nodeName + '未选择审核人' })
          }
          this.reErr(data.childNode)
        } else if (data.childNode.type === 2) {
          if (data.childNode.error) {
            this.tipList.push({ msg: data.childNode.nodeName + '未选择抄送人' })
          }
          this.reErr(data.childNode)
        } else if (data.childNode.type === 3) {
          this.reErr(data.childNode.childNode)
        } else if (data.childNode.type === 4) {
          this.reErr(data.childNode)
          for (var i = 0; i < data.childNode.conditionNodes.length; i++) {
            if (data.childNode.conditionNodes[i].error) {
              this.tipList.push({ msg: data.childNode.conditionNodes[i].nodeName + '未选择条件' })
            }
            this.reErr(data.childNode.conditionNodes[i])
          }
        } else if (data.childNode.type === 5) {
          if (data.childNode.error) {
            this.tipList.push({ msg: data.childNode.nodeName + '未选择审核人' })
          }
          this.reErr(data.childNode)
        } else if (data.childNode.type === 6) {
          if (data.childNode.error) {
            this.tipList.push({ msg: data.childNode.nodeName + '未选择签收人' })
          }
          this.reErr(data.childNode)
        } else if (data.childNode.type === 7) {
          if (data.childNode.error) {
            this.tipList.push({ msg: data.childNode.nodeName + '未选择出纳' })
          }
          this.reErr(data.childNode)
        }
        if (data.childNode.nodeName.length < 1) {
          this.tipList.push({ msg: '未设置节点名称' })
        }
      } else {
        data.childNode = null
      }
    },
    saveSet() {
      // this.isTried = true
      // this.tipList = []
      // this.reErr(this.nodeConfig)
      // if (this.tipList.length !== 0) {
      //   this.tipVisible = true
      //   return
      // }
      // this.processConfig.flowPermission = this.flowPermission
      // console.log(JSON.stringify(this.processConfig))
      // this.$axios.post("", this.processConfig).then(res => {
      //     if (res.code == 200) {
      //         this.$message.success("设置成功");
      //         setTimeout(function () {
      //             window.location.href = ""
      //         }, 200)
      //     }
      // })
    },
    zoomSize(type) {
      if (type === 1) {
        if (this.nowVal === 50) {
          return
        }
        this.nowVal -= 10
      } else {
        if (this.nowVal === 300) {
          return
        }
        this.nowVal += 10
      }
    },
    updateFlow() {
      this.isTried = true
      this.tipList = []
      this.reErr(this.nodeConfig)
      if (this.tipList.length !== 0) {
        this.tipVisible = true
        return false
      } else {
        this.$emit('update:flowData', this.nodeConfig)
        return true
      }
    }
  }
}
</script>
<style scoped>
@import "../../../styles/workflow.scss";
.error-modal-list {
	width: 455px;
}
</style>
<style lang="scss" scoped>
.fd-nav-content{
  position: static;
}

.main-full-height{
    height: calc(100vh - 339px);
}
.dingflow-design{
  overflow: scroll;
  ::v-deep.editable-title{
    padding:0 10px;
  }
  ::v-deep.close{
    font-size: 20px;
  }
}
</style>
